import { useEffect, useState } from 'react'
import { Card, Tabs, Input, Table, Space, Button, Tag, Drawer } from 'antd'
import { getOrdersList } from '@/api/order'
import type { TableProps } from 'antd'

const tabList = [
  {
    name: '全部',
    value: 'all'
  },
  {
    name: '待付款',
    value: 'nopay'
  },
  {
    name: '待发货',
    value: 'noship'
  },
  {
    name: '已发货',
    value: 'shiped'
  },
  {
    name: '已收货',
    value: 'received'
  },
  {
    name: '已完成',
    value: 'finish'
  },
  {
    name: '已关闭',
    value: 'closed'
  },
  {
    name: '退款中',
    value: 'refunding'
  }
]
const { Search } = Input
const items = tabList.map(item => {
  return {
    key: item.value,
    label: item.name,
    children: ''
  }
})
function order() {
  const [tab, setTab] = useState('all')
  const [page, setPage] = useState(1)
  const [orderNo, setOrderNo] = useState('')
  const [total, setTotal] = useState(0)
  const [list, setList] = useState([])
  const onTabChange = (e: string) => {
    setTab(e)
  }
  const onSearch = (data: string) => {
    console.log(data)
    setOrderNo(data)
  }
  useEffect(() => {
    getList()
  }, [tab, page, orderNo])
  const getList = () => {
    var no = orderNo
    getOrdersList({ page, tab, no }).then(res => {
      if (res.status === 200) {
        console.log(res.data.list)

        setList(res.data.list)
        setTotal(res.data.totalCount)
      }
    })
  }
  const payment_method = (method: string) => {
    if (method === 'alipay') {
      return <Tag color='blue'>支付宝支付</Tag>
    } else if (method === 'wechat') {
      return <Tag color='green'>微信支付</Tag>
    } else {
      return <Tag>未支付</Tag>
    }
  }
  // 订单详情
  const [details, setDetails] = useState<any>()
  const detailClick = (row: any) => {
    row.order_items = row.order_items.map((o: any) => {
      if (o.skus_type == 1 && o.goods_skus) {
        let s = []
        for (const k in o.goods_skus.skus) {
          s.push(o.goods_skus.skus[k].value)
        }
        o.sku = s.join(',')
      }
      return o
    })
    setDetails(row)
    console.log(row)
    setOpen(true)
  }
  // 弹框
  const [open, setOpen] = useState(false)

  const columns: TableProps<any>['columns'] = [
    {
      title: '商品',
      render: (_, row) => (
        <div>
          <p>订单编号：{row.no}</p>
          {row.order_items.map((item: any, index: number) => {
            return (
              <div key={index} style={{ display: 'flex', justifyContent: 'space-around' }}>
                <img src={item.goods_item ? item.goods_item.cover : ''} alt='' style={{ maxWidth: '50px' }} />
                <p style={{ color: '#3b82f6', width: '180px' }}>{item.goods_item ? item.goods_item.title : '商品已被删除'}</p>
              </div>
            )
          })}
        </div>
      )
    },
    {
      title: '下单时间',
      dataIndex: 'create_time',
      key: 'create_time'
    },
    {
      title: '实际付款',
      dataIndex: 'total_price',
      key: 'total_price'
    },
    {
      title: '买家',
      dataIndex: 'create_time',
      key: 'create_time',
      render: (_, record) => (
        <div>
          <p>{record.user.nickname}</p>
          <p>用户ID：{record.user_id}</p>
        </div>
      )
    },
    {
      title: '交易状态',
      render: (_, record) => (
        <div>
          <p>付款状态： {payment_method(record.payment_method)}</p>
          <p>
            发货状态： <Tag color={record.ship_data ? 'green' : ''}>{record.ship_data ? '已发货' : '未发货'}</Tag>
          </p>
          <p>
            收货状态： <Tag color={record.ship_status == 'received' ? 'green' : ''}>{record.ship_status == 'received' ? '已收货' : '未收货'}</Tag>
          </p>
        </div>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size='middle'>
          <Button
            size='small'
            type='text'
            style={{ color: '#409eff' }}
            onClick={() => {
              detailClick(record)
            }}
          >
            订单详情
          </Button>
        </Space>
      )
    }
  ]
  const pageChange = (e: any) => {
    setPage(e.current)
  }
  return (
    <>
      <Card>
        <Tabs defaultActiveKey={tab} items={items} onChange={onTabChange} />
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <p style={{ marginRight: 15 }}>订单编号:</p>
          <Search placeholder='请输入订单编号' onSearch={onSearch} enterButton style={{ width: '300px' }} allowClear />
        </div>
        <Table columns={columns} dataSource={list} pagination={{ total }} onChange={pageChange} rowKey='id' />
      </Card>
      <Drawer
        title='订单详情'
        onClose={() => {
          setOpen(false)
        }}
        open={open}
      >
        {details && (
          <div>
            <Card title='订单详情' style={{ width: 300 }}>
              <p>订单号： {details.no}</p>
              <p>付款方式： {payment_method(details.payment_method)}</p>
              <p>付款时间： {details.paid_time}</p>
              <p>创建时间： {details.create_time}</p>
            </Card>

            <Card title='商品信息' style={{ width: 300 }}>
              {details.order_items.map((item: any, index: number) => {
                return (
                  <div key={index} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
                    <img src={item.goods_item?.cover} alt='' width={60} height={60} />
                    <div>
                      <p>{item.goods_item?.title ?? '商品已被删除'}</p>
                      {item.sku && (
                        <p>
                          <Tag>{item.sku}</Tag>
                        </p>
                      )}
                      <p>
                        <b>￥{item.price}</b>
                        <span>x{item.num}</span>
                      </p>
                    </div>
                  </div>
                )
              })}
              <p>成交价￥{details.total_price}</p>
            </Card>
            {details.address && (
              <Card title='收货信息' style={{ width: 300 }}>
                <p>收货人: {details.address?.name}</p>
                <p>联系方式: {details.address.name}</p>
                <p>收货地址: {details.address.province + details.address.city + details.address.district + details.address.address}</p>
              </Card>
            )}
          </div>
        )}
      </Drawer>
    </>
  )
}
export default order
